<template>
  <span class="addUser">
    <el-button type="primary" @click="visabled = true" size="small">添加账号</el-button>
    <el-dialog title="添加账号" :visible.sync="visabled" width="440px" top="137px" center>
      <el-form :model="addUserForm" ref="addUserForm" label-width="100px" class="demo-ruleForm" label-position="left">
        <el-form-item label="手机号码" prop="mobilePhone" maxlength="11" :rules="[
             { required: true, message: '请输入手机号码'},
             { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '手机号格式有误' }
          ]">
          <el-input type="text" v-model="addUserForm.mobilePhone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="name" :rules="[
            { required: true, message: '请输入昵称'},
          ]">
          <el-input type="text" v-model="addUserForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd" :rules="[
            { required: true, message: '请输入密码'},
            { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/, message: '密码必须由6-16位的数字和字母组成' }
          ]">
          <el-input type="password" v-model="addUserForm.pwd" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :rules="[
            { required: true, message: '请输入邮箱'},
            { pattern:/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '邮箱格式输入有误' }
          ]">
          <el-input type="text" v-model="addUserForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item class="belong_role" label="所属用户组" prop="sel_roleId" :rules="[
            { type: 'array', required: true, message: '请至少选择一个所属用户组', trigger: 'change' }
          ]">
          <el-checkbox-group v-model="addUserForm.sel_roleId">
            <el-checkbox v-for="item in role_list" :key="item.id" :label="item.id" name="sel_roleId" border size="mini">{{item.text}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="medium">取 消</el-button>
        <el-button type="primary" @click="submitForm" size="medium">确 定</el-button>
      </span>
    </el-dialog>
  </span>
</template>

<script>
import {
  addWebUser,
} from '~/api/'
export default {
  props: {
    role_list: null,
  },
  data() {
    return {
      visabled: false,
      addUserForm: {
        mobilePhone: '',
        name: '',
        pwd: '',
        email: '',
        sel_roleId: []
      },
    }
  },
  methods: {
    getRoleNameStr(data) {
      let arr = []
      this.role_list.map(item => {
        if (this.addUserForm.sel_roleId.indexOf(item.id) != -1) {
          arr.push(item.text)
        }
      })
      return arr.toString()
    },
    submitForm() {
      this.$refs['addUserForm'].validate(async (valid) => {
        if (!valid) return
        let res = await addWebUser(this, this.addUserForm.mobilePhone, this.addUserForm.email, this.addUserForm.name, this.addUserForm.pwd, this.addUserForm.sel_roleId)
        if (res.code === '0') {
          this.$message.success('添加成功')
          this.$emit('on-add-success', {
            mobilePhone: this.addUserForm['mobilePhone'],
            name: this.addUserForm['name'],
            email: this.addUserForm['email'],
            roleNameStr: this.getRoleNameStr()
          })
          this.visabled = false
          // location.reload()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    resetForm() {
      this.$refs['addUserForm'].resetFields()
      this.visabled = false
    }
  }
}
</script>

<style lang="scss" scoped>
.addUser {
  & /deep/ {
    .el-dialog {
      border-radius: 20px;
    }
    .el-dialog__header {
      text-align: left;
      border-bottom: 1px solid #eee;
      span {
        color: #0070ff;
      }
    }
    .el-button{
      font-size: 16px;
    }
    .el-dialog__body {
    padding: 30px 20px 0 20px;
    .el-form-item__label{
      font-size: 16px;
    }
}
    .el-input__inner {
      border-radius: 40px;
    }
    .el-checkbox__input {
      display: none;
    }
    .belong_role {
      & /deep/ {
        .el-form-item__label {
          width: 100% !important;
        }
        .el-form-item__content {
          margin-left: 0 !important;
        }
        .el-checkbox {
          margin-left: 0 !important;
          margin-right: 10px !important;
        }
      }
    }
  }
}
</style>
